<template>
	<view>
		<view class="container" v-if="info.id">
			<view class="s-order-header">
				<image src="../../static/images/icon/img_detail_bg.png" mode="widthFix" class="s-img-bg"></image>
				<view class="s-header-content">
					<view>
						<view class="s-status-text" v-if="info.status==1">待付款</view>
						<view class="s-status-text" v-if="info.status==2">待发货</view>
						<view class="s-status-text" v-if="info.status==3">待收货</view> 
						<view class="s-status-text" v-if="info.status==4">待评价</view>
						<view class="s-status-text" v-if="info.status==5">订单已取消</view>
						<view class="s-status-text" v-if="info.status==6">申诉中</view>
						<view class="s-status-text" v-if="info.status==7">申诉失败</view>
						<view class="s-status-text" v-if="info.status==8">申诉完成</view>
						<view class="s-status-text" v-if="info.status==9">已完成</view>
					</view>
					<image src="../../static/images/icon/order_pay.png" class="s-status-img" mode="widthFix"></image>
				</view>
			</view>
			<s-list-cell :last="true" :hover="false" bgcolor="#fefefe">
				<view class="s-flex-box">
					<image src="../../static/images/icon/address.png" class="s-icon-img"></image>
					<view class="s-addr">
						<view class="s-addr-userinfo">
							{{info.user_name}}
							<text class="s-addr-tel">{{info.user_phone}}</text>
						</view>
						<view class="s-addr-text">
							{{info.user_address}}
						</view>
					</view>
				</view>
			</s-list-cell>
			
			<view class="s-order-item">
				<s-list-cell :hover="false" :lineLeft="false">
					<view class="s-goods-title">
						商品信息
					</view>
				</s-list-cell>
				<block v-for="(item,index) in info.order_info_to" :key="index">
					<s-list-cell padding="0">
						<view class="s-goods-item">
							<image :src="item.product_to.image_url" class="s-goods-img"></image>
							<view class="s-goods-center">
								<view class="s-goods-name">
									{{item.product_to.name}}
								</view>
								<view class="s-goods-attr" v-if="item.specs">{{item.specs}}</view>
							</view>
							<view class="s-price-right">
								<view>单价：￥{{item.money}}</view>
								<view>邮费：￥{{item.postage}}</view>
								<view>x{{item.num}}</view>
							</view>
						</view>
					</s-list-cell>
				</block>
				<view class="s-goods-info">
					<view class="s-price-flex s-size24">
						<view>商品总额</view>
						<view>￥{{info.total_money}}</view>
					</view>
					<view class="s-price-flex  s-size24">
						<view>配送费</view>
						<view>￥{{info.deliver_money}}</view>
					</view>
					<view class="s-price-flex s-size32 s-pbtm20">
						<view class="s-flex-shrink">合计</view>
						<view class="s-goods-price">
							<view class="s-size-24">￥</view>
							<view class="s-price-large">{{info.total_money}}</view>
						</view>
					</view>
					<view class="s-price-flex s-size32">
						<view class="s-flex-shrink">实付款</view>
						<view class="s-goods-price s-primary-color">
							<view class="s-size-24">￥</view>
							<view class="s-price-large">{{info.total_money}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="s-order-info">
				<s-list-cell :hover="false">
					<view class="s-order-title">
						订单信息
					</view>
				</s-list-cell>
				<view class="s-order-content">
					<view class="s-order-flex">
						<view class="s-item-title">订单号:</view>
						<view class="s-item-content">{{info.order_no}}</view>
					</view>
					<view class="s-order-flex">
						<view class="s-item-title">创建时间:</view>
						<view class="s-item-content">{{info.created_at}}</view>
					</view>
					<view class="s-order-flex" v-if="info.pay_time">
						<view class="s-item-title">付款时间:</view>
						<view class="s-item-content">{{info.pay_time}}</view>
					</view>
					<view class="s-order-flex" v-if="info.delivery_time">
						<view class="s-item-title">发货时间:</view>
						<view class="s-item-content">{{info.delivery_time}}</view>
					</view>
					<view class="s-order-flex" v-if="info.comment">
						<view class="s-item-title">订单备注:</view>
						<view class="s-item-content">{{info.comment}}</view>
					</view>
				</view>
			</view>
			<view class="s-order-info" v-for="(item,index) in info.order_complain_to" :key="index">
				<s-list-cell :hover="false">
					<view class="s-order-title">
						申诉内容
						<text class="complain_status_text" v-if="item.status==0">(申诉中)</text>
						<text class="complain_status_text" v-if="item.status==1">(通过)</text>
						<text class="complain_status_text" v-if="item.status==2">(驳回)</text>
					</view>
				</s-list-cell>
				<view class="s-order-content">
					<view class="s-order-flex">
						<view class="s-item-complain">{{item.content}}</view>
					</view>
					<view class="s-upload-box" v-if="item.images.length">
						<view class="s-image-item" v-for="(it,ind) in item.images" :key="ind">
							<image :src="it" @tap="image_preview(index,ind)" class="s-item-img" mode="aspectFill"></image>
						</view>
					</view>
					<view class="s-order-flex" v-if="item.return_content">
						<view class="s-item-title">申诉结果:</view>
						<view class="s-item-content">{{item.return_content}}</view>
					</view>
				</view>
			</view>
			
			<view class="s-safe-area"></view>
			<view class="s-tabbar">
				<view class="s-btn-mr" v-if="info.status==1">
					<s-button type="black" :plain="true" size="mini" shape="circle"  @click="order_cancel">取消订单</s-button>
				</view>
				
				<view class="s-btn-mr"  v-if="info.status==1">
					<s-button type="danger" :plain="true" size="mini" shape="circle" @click="order_pay">立即支付</s-button>
				</view>
				<view class="s-btn-mr"  v-if="info.status==3">
					<s-button type="danger" :plain="true" size="mini" shape="circle"  @click="order_confirm">确认收货</s-button>
				</view>
			</view>
			
			
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{}
			}
		},
		async onLoad(options) {
			this.id = options.id
			await this.getOrderDetail()
		},
		methods: {
			//商品详情
			async getOrderDetail() {
				this.info = await this.$s.model.order.getOrderDetail({id:this.id})
			},
			// 取消订单
			async order_cancel(){
				const res = await this.$s.uniApi.showModal({content:'确定要取消订单吗？'})
				if (res.confirm) {
					await this.$s.model.order.orderCancel({id:this.id})
					await this.$s.uniApi.navigateBack({})
				}
			},
			// 确认收货
			async order_confirm(){
				const res = await this.$s.uniApi.showModal({content:'确认收货？'})
				if (res.confirm) {
					await this.$s.model.order.orderConfirm({id:this.id})
					await this.$s.uniApi.navigateBack({})
				}
			},
			//查看图片
			image_preview(index,ind){
				console.log(index,ind)
				uni.previewImage({
					current: this.info.order_complain_to[index].images[ind],
					urls: this.info.order_complain_to[index].images
				})
			},
			//去支付
			async order_pay(){
				await this.$s.uniApi.deliveryRelease()
				const data = await this.$s.model.order.wxOrderPay({id:this.info.id})
				const resData = await this.$s.uniApi.requestPayment(data)
				// #ifdef MP-WEIXIN
					if(resData.errMsg === "requestPayment:ok"){
						await this.$s.uniApi.navigateBack({})
					}else{
						return this.$s.uniApi.showToast({title:'支付失败！'})
					}
				// #endif
				// #ifdef MP-TOUTIAO
					if(resData.code === 0){
						await this.$s.uniApi.navigateBack({})
					}else{
						return this.$s.uniApi.showToast({title:'支付失败！'})
					}
				// #endif
				
			}
		},
		//下拉刷新
		async onPullDownRefresh() {
			await this.getOrderDetail()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
@import 'order_detail.scss';
</style>
